<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
</head>

<body>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        // 加载geojson数据
        /* 
        1、方法1：变量  new ol.format.GeoJSON().readFeatures();// 可加载标准和非标准
                       new ol.format.GeoJSON().readFeature()// 只可加载单个feature（非标准）
        2、方法2：文件  url  // 加载标准和非标准均可
        new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url:"xxx"
        })
         */
        // var data = {
        //     type: "FeatureCollection",
        //     features: [
        //         {
        //             type: "Feature",
        //             geometry: {
        //                 type: "Point",
        //                 coordinates: [114.30, 30.50]
        //             }
        //         }
        //     ]
        // }
        // 非标准
        var data_no = {
            type: "Feature",
            geometry: {
                type: "Point",
                coordinates: [114, 30]
            }
        }
        /* web(浏览器)  gis(gdb)// gis的数据一般都存在gdb的数据库中 */
        /* shp-arcgis  ---geojson
        // 注：arcgis的.shp文件，也可以转成geojson。可以用工具或包转，也可以用node转
        // 可以在网上搜一下方法。
        // 然后就也可以用这个geojson格式化器，去转成ol的feature要素或数据源啦。
         */
        var features = new ol.format.GeoJSON().readFeatures(data_no);
        console.log(features)
        // 变量：
        var source = new ol.source.Vector({
            features
        })
        // 文件：
        // let source = new ol.source.Vector({
        //     format: new ol.format.GeoJSON(),
        //     url: "./data/review.geojson"
        // })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
    </script>
</body>

</html>